<template>
<div class="main">
  <div class="jumbotron">
    <div class="wh jumbotron-inner">
        <h1>资讯</h1>
        <h4>{{detail.title}}</h4>
    </div>
    <div class="lang">
      <div class="lang_2"></div>
    </div>     
  </div>
  
  <div class="w path">
  	<nuxt-link to="/">首页</nuxt-link> 
    <span v-if="path && path.length > 0" @click="setCate([item.id])" v-for="item in path" :key ="item.id" >
    	<a-icon class="path-icon" type="right" />
    	{{item.cateName}}
    </span>
  </div>
  <div class="w" style="padding-bottom:20px;">
  <a-row class="list" :gutter="15" >
  	<a-col  :xs=24 :sm=24 :md=17 :lg=17 :xl=17>
			<div class="content boxshw">
      	<div class="content-head">
      		<h1 class="title">{{detail.title}}</h1>
          <div class="content-tip">
            <a-icon type="clock-circle" /><span class="en">{{detail.created | setTimeFormat}}</span>
            <a-icon type="user" /><span class="en">admin</span>
            <span  @click="setLinkNum(detail.id,'2')">
							<a-icon type="like"/><span class="en">{{detail.likeNum}}</span>
						</span>
            <a-icon type="eye" /><span class="en">{{detail.clickNum}}</span>
          </div>         
        </div>
				<div v-if="detail.introduct" class="content-introduct">{{detail.introduct}}</div>	
        <div class="content-main" id="contentMain" v-highlight v-html="detail.content"></div>
      </div>
			<Comment></Comment>
    </a-col> 
    <a-col :xs=0 :sm=0 :md=7 :lg=7 :xl=7 >
    	<div class="tree">
      	<h4 class="tree-tit">资讯分类</h4>
     		<a-tree style=" padding:0 0 15px 0;" :tree-data="treeData" blockNode @select="setCate" :replaceFields="{title:'cateName',key:'id'}" :expand-on-click-node="false" default-expand-all></a-tree> 
      </div>
      <a-affix :offsetTop="80">
       <div class="tree">	
        <h4 class="tree-tit">内容目录</h4>
        <a-anchor :affix="false" :target-offset="90" :showInkInFixed="true" style=" margin-left:0;  padding:30px;" >
          <a-anchor-link v-for="(item,index) in anchorLink" :href="'#'+index" :title="item" />          
        </a-anchor>
       </div>          
      </a-affix>
    </a-col>  
  </a-row>
  </div>
</div>
</template>


<script>
import api from "@/global/api";
import Comment from "@/components/Comment";
export default {
  components: {Comment},
  validate ({ params }) {
    //return /^\d+$/.test(params.id)
  	return true;
	},
  async asyncData({$axios,route,params}) {
		let channel = route.name;
		let treeData = await $axios.get(api.getContentCate);
		treeData = treeData.data;
		let detail = await $axios.post(api.getContentDetail,params);
		detail = detail.data;
		let path = detail.path;
		return {detail,path,treeData}
  },
  data() {
    return {
			anchorLink:[]
		}
  },
	head(){
		return{
			title:this.detail.title,
			meta:[
				{hid:'description',name:'detail',content:this.detail.title}
			]
		}
	},				
	mounted() {
		var _anchorDom = document.getElementById('contentMain').getElementsByTagName('h3');
		var _anchorLink = [];
		for(var i = 0; i<_anchorDom.length; i++){
			_anchorDom[i].id = i;
			_anchorLink.push(_anchorDom[i].innerText)	
		};
		this.anchorLink = _anchorLink;
		this.setLinkNum(this.$route.params.id,'1');
	},
  methods: {
		setCate(keys){
			var curCateId = keys && keys.length > 0 ? keys[0] : '';	
			this.$router.push({name:'list-page',params:{page:1},query:{cateId:curCateId}})		
		},
		async setLinkNum(_id,_type){
			if(_type == 2){this.detail.likeNum++;}
			let _tips = await this.$axios.put(api.setContentTips+'/'+_id,{type:_type},{ progress: false });
		}
	},
	filters: {
		setImgUrl(val){
			return api.host+val;	
		},		
		setTimeFormat(val){
			var paddingStr = function (_str) {
				return _str.length == 1 ? "0" + _str : _str
			}
			var _curDate = new Date(val);	
			var _YY = _curDate.getFullYear();
			var _MM = paddingStr(_curDate.getMonth() + 1 + '');
			var _DD = paddingStr(_curDate.getDate() + '');
			return `${_YY}-${_MM}-${_DD}`			
		}
	}		
}
</script>

<style scoped>
.path{ height:30px; line-height:30px; font-size:16px;}
.path .path-icon{ font-size:12px; color:#666;}
.path span{ cursor:pointer;}
.jumbotron { margin: 0 0 20px 0; color: #fff; position:relative; height:190px; background:#2EA7E0 url(../../assets/banner.png) no-repeat right 0; }
.jumbotron-inner{ height:190px; background:; background-size:contain;}
.lang {overflow:hidden;width:100%; position:absolute;left:0;opacity:.58;bottom:0;}
.lang_1 {background:url(../../assets/banner-b.png) repeat-x;width:4500px;height:60px;animation:langs 12s infinite linear;position:absolute;top:0;}
.lang_2 {background:url(../../assets/banner-t.png) repeat-x;width:4500px;height:55px;animation:langs 18s infinite linear;position:relative;top:0;}
@keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
@-webkit-keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
.jumbotron h1{ font-size:40px; font-weight:normal; margin:40px 0 20px 0; padding:0;}
.jumbotron h4{ font-weight:normal; margin:0; font-size:15px; letter-spacing:1px;}
.list{ margin-bottom:20px;}
.content{background-color: #fff; padding:15px 20px 25px; margin:15px 0;  position:relative;}
.content-head{  margin-bottom:15px;}
.content-head h1{ font-size:22px;   margin: 15px 0 ;}
.content-tip{ margin-bottom:15px; color:#999; padding-bottom:20px; border-bottom:1px solid #EFEFEE}
.content-tip i{ vertical-align:middle; cursor:pointer; margin-right:5px; font-size:14px;}
.content-tip span.en{ cursor:pointer; margin-right:20px;}
.content-introduct{ line-height:1.8; color:#0093FF; text-indent:32px; font-size:16px; background:#E1F8FF; padding:10px; margin-bottom:12px;}

.content-main{ line-height:2; font-size:15px;  }
.content-main >>> h3{ margin:8px 0;  font-size:18px;}
.content-main >>> code{ font-family:"Courier New", Courier, monospace; line-height:1.4; font-size:16px;}
.content-main >>> .language-bash .hljs-comment{ position:absolute; left:40%;}
.content-main >>> p{ margin-bottom:10px;}
.content-main >>> a{ color:#2EA7E0;}
.content-main >>> .link{color: #b2b2b2; background:#F7F7F7; overflow:auto; white-space:nowrap; font-size:14px; padding-left:10px; border-left: 4px solid #ebebeb; line-height:35px;}
.content-main >>> .link a{ color:#2EA7E0;  font-family:"Courier New", Courier, monospace;}
.content-main >>> .link a:hover{text-decoration:underline;}
.tree{ background:#fff; margin-top:15px; box-shadow: 2px 2px 3px #ccc; padding-left:8px; overflow:hidden;}
.tree-tit{ height:50px; margin:0; line-height:52px; padding-left:20px; overflow:hidden; font-size:16px; border-bottom:1px solid #EFEFEE;}
.tree >>> .ant-tree-switcher{ margin:8px 0 0 0;} 
.tree >>> .ant-tree-treenode-switcher-open{ overflow:hidden;}
.tree >>> .ant-tree-node-content-wrapper{ transition:all 0.1s; border:0; height:35px;  line-height:35px; border-radius:0; padding:0 0 0 8px !important; overflow:hidden !important; width:100%; margin:0;}
.tree >>> .ant-tree li{ padding:0;} 
.tree >>> .ant-tree-switcher-noop{}
</style>
